
<template>
  <div class="graph-view" :id="id"></div>
</template>

<script>
import config from './config';
import Chart from './common';

export default {
  name: 'graph',
  props: {
    'value': {}
  },
  data () {
    let id = 'view' + (Math.random() * 10000).toFixed(0);
    if (this.value in config) config[this.value]['id'] = id;
    return {
      id: id,
      url: config[this.value].url
    }
  },
  mounted () {
    let $this = this;
    console.log([this.id, this.value, this.url]);
    import(`./${this.value}.js`).then(
      // 得到配置项
      function (lib) {
        // 图形配置项，图形名称
        let [option, name] = [lib.option, lib.name];
        // 无接口情况
        if (config[$this.value].url === '') {
          Chart.draw(option, $this.value);
        } else {
          Chart.ajaxData(config[$this.value].url, {}, function (rst) {
            // 数据转换接口
            Chart.dataLoad(option, name, rst.data);
            Chart.draw(option, $this.value);
          });
        }
      }
    );
  }
}
</script>

<style scoped>
  .graph-view {
    width: 100%;
    height: 100%;
    min-height: 200px;
    min-width: 200px;
  }
</style>
